<template name="room">
    <view class="checkin-process PA-list">
		<view class="line"></view>  
		   <view class="none" v-if="tableData.length == 0">
			   <image src="../../static/img/zwjl.png" alt="" class="zwkf" />
		   </view>
		   <view v-else>
			   <view v-if="add==''">
				   <view class="bcard" v-for="(item, k) in tableData" :key="k" >
								<view class="left-line"></view>				
								<view class="bt">
									<text class="hotel-name">{{ item.invoiceTitle }}</text>					
								</view>
								<view class="bc">		
									<view class="btime" v-if=" item.invoiceType =='1'">发票类型：企业</view>
									<view class="btime" v-if=" item.invoiceType =='2'">发票类型：个人</view>
								</view>              
						<view class="br" >
									<view class="bbtn delete" @click.stop="cancel(item)">
										删除
									</view> 
									<view class="bbtn edit" @click="toadd(0, item)">
										 编辑
									 </view>					                                   
						</view>
					</view>
			   </view>
			   <view v-else>
				   <view class="bcard" v-for="(item, k) in tableData" :key="k"  @click="gotoback(item)">   
						<view class="left-line"></view>				
						<view class="bt">
							<text class="hotel-name">{{ item.invoiceTitle }}</text>					
						</view>
						<view class="bc">		
							<view class="btime" v-if=" item.invoiceType =='1'">发票类型：企业</view>
							<view class="btime" v-if=" item.invoiceType =='2'">发票类型：个人</view>
						</view>              
						
					</view>
				</view>
			</view>
		<view class="badd-box" v-show="add==''">
			<view class="badd" @click="toadd(1, {})">
			        <image                  
			            src="/static/img/add.png"
			            mode="widthFix"
			        ></image>
			        <text class="add">添加发票抬头</text>
			</view>
		</view>        
      <!--  <popup-layer
            ref="popupRef"
            :direction="'top'"
            @closeCallBack="closeCallBack"
        >
        </popup-layer> -->
    </view>
</template>

<script>
// import { mapState, mapMutations, mapActions } from "vuex";
// import cardItem from "../../components/card/card";
// import selectTime from "../../components/select-time/select-time";
// import popupLayer from "../../components/popup-layer.vue";

export default {
    name: "room",
    // components: {
    //     cardItem,
    //     selectTime,
    //     popupLayer
    // },
    data() {
        return {
            bottom: true,
            where: {        
				pageNum: 1,
				pageSize:10,			
				phoneNumber:uni.getStorageSync("phone"),
				invoiceType:''
            },
            tableData: [],
            total: [],	
			request:true,
			add:'',
			transmission:'transmission'
        };
    },
    // computed: {
    //     ...mapState({
    //         user: "user",
    //         hotelId: "hotelId",
    //         selectDate: "selectDate",
    //         roomList: "roomList",
    //         selectDate: "selectDate",
    //         roomStatusItem: "roomStatusItem",
    //         rightSide: "rightSide",
    //         card: "card"
    //     })
    // },

    methods: {
        // ...mapActions({
        //     getRoomList: "getRoomList" // map `this.add()` to `this.$store.dispatch('increment')`
        // }),
        // ...mapMutations({
        //     setUser: "setUser",
        //     changgeRightSide: "changgeRightSide"
        // }),
		gotoback(row){		
			if(this.add!=''){											
				uni.navigateBack();
				uni.setStorageSync("selectinvoiceData", row);																												
			}												
		},
		 onLoad(addval) {  			
			console.log(addval);
					this.add = addval.add;
			if(addval.add==2){
					this.where.invoiceType=parseInt(addval.typeval);
			}
			
			
		 },
        closeCallBack() {
            uni.showTabBar({
                animation: true
            });
            this.changgeRightSide(false);
        },
        getList() {
			uni.showLoading({
			  title: "加载中",
			  mask: true,
			});
			if(this.request){
				this.$http
                .get("/template/page", this.where, {
                    header: {} /* 会覆盖全局header */,
                    dataType: "json",
                    responseType: "text"
                })
                .then(res => {
                    let data = res.data.data;
                    if (data.code == 0) {                 
						if(this.tableData.length <data.total){
							this.tableData= this.tableData.concat(data.rows); //合并数组										
							if(this.tableData.length==data.total){
								this.request=false;
							}
						}else{
							this.request=false;
						}	
                    } else {
                        uni.showToast({
                            title: data.msg,
                            image: "/static/img/warn.png",
                            duration: 2000
                        });
                    }
					  uni.hideLoading();
                })
                .catch(err => {});
			}else{
				  uni.hideLoading();
			}
        },
        toadd(add, item) {
            uni.navigateTo({
                url:
                    "/pages/InvoiceTitle/InvoiceAddEdit?add=" +
                    add +
                    "&item=" +
                    JSON.stringify(item)
            });
        },		
        cancel(val) {			
            uni.showModal({
                title: "提示",
                content: "确定删除吗？",
                success: res => {
					
                    if (res.confirm) {
                        this.$http
                            .get(
                                "/template/del",
                                {
                                     invoiceTemplateId:val.invoiceTemplateId,
                                   
                                },
                                {
                                    header: {} /* 会覆盖全局header */,
                                    dataType: "json",
                                    responseType: "text"
                                }
                            )
                            .then(res => {
                                console.log(res);
                                let data = res.data;
                                if (data.code == 0) {
                                    console.log(data.data);
                                    uni.showToast({
                                        image: "/static/img/success.png",
                                        title: "删除成功",
                                        duration: 1000
                                    });
                                    uni.startPullDownRefresh();
                                } else {
                                    uni.showToast({
                                        image: "/static/img/warn.png",
                                        title: data.msg,
                                        duration: 1000
                                    });
                                }
                            })
                            .catch(err => {});
                    } else if (res.cancel) {
                        console.log("用户点击取消");
                    }					
                }
            });			
        }
    },
    // onShow() {
    //     this.getList();
    // },
    onShow() {
	
        let user = uni.getStorageSync("user");
        if (!user) {
            uni.reLaunch({
                url: "/pages/login/login"
            });
        }
       
		 uni.startPullDownRefresh();
    },  
	onPullDownRefresh() {
		this.where.pageNum=1;
		this.tableData=[];
		this.request=true;
		this.getList();
	   setTimeout(function () {
		   uni.stopPullDownRefresh();
	   }, 1000);
	},
	onReachBottom(){ //触底开始下一页
	   this.where.pageNum+= 1, //更新当前页数	     
	    this.getList();//重新调用请求获取下一页数据
	 },

    watch: {
        hotelId: function() {
            if (this.hotelId) {
                this.getList();
            }
        },
        selectDate: function(newd, oldd) {
            console.log(newd);
            if (
                this.$moment(new Date(newd)).format("YYYY-MM-DD HH:mm:ss") !=
                this.$moment(new Date(oldd)).format("YYYY-MM-DD HH:mm:ss")
            ) {
                this.whiteList();
            }
        },
        rightSide() {
            if (this.rightSide) {
                uni.hideTabBar({
                    animation: true
                });
                this.$refs.popupRef.show();
            } else {
                uni.showTabBar({
                    animation: true
                });
            }
        }
    }
};
</script>
<style scoped >	
.PA-list{
    min-height: 100%;
	height: auto;
    padding-bottom: 40px;	
	background:#fff;
}
.avatar {
    border-radius: 50%;
    height: 100%;
    width: 100%;
}
.userinfo {
    position: relative;
    width: 750rpx;
    height: 320rpx;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.userinfo-avatar {
    overflow: hidden;
    display: block;
    width: 160rpx;
    height: 160rpx;
    margin: 20rpx;
    margin-top: 50rpx;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.userinfo {
    /* color: #fff; */
    font-size: 14px;
    background-color: #c0c0c0;
}
.header {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scroll {
    /* margin-top: 40px; */
    padding-bottom: 140upx;
	padding-top: 40upx;
}
.dateshow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 115rpx;
}
.dateshow view {
    background: #bdbdbd;
    padding: 5px;
    border-radius: 4px 4px 4px 4px;
    color: white;
}
.bcard {     
    margin:0px 24upx 24upx 24upx;   
	height:230upx;
	background:#fff;
	border:1upx solid rgba(245, 245, 245, 1);
	box-shadow:4upx 7upx 10upx 0upx rgba(0, 0, 0, 0.1);
	border-radius:16upx;	
	padding: 40upx;
	position: relative;
	padding-bottom: 20upx;
	position: relative;
	
}
.left-line{
	position:absolute;
	left: 0upx;
	top: 0upx;
	width:8upx;
	height:66upx;
	background:#6585F2;
	border-radius:16upx 0upx 0upx   0upx;
}
.bt {
    font-size: 24upx;	
	height: 28upx;
	line-height: 28upx;
}
.hotel-name {   
	color: #000;	
}
.room-num {
   padding-left:18upx;
   color: #797979;
}
.bc {
  
}
.binfo {
  color: #000;
  padding-top: 8upx;
}
.pname {
   font-size:32upx;
}
.phone {
    font-size:24upx;	
}
.btime {
    color: #797979;
	font-size: 24upx;
	padding-top: 12upx;
}
.br {
   height: 100upx;
   text-align: right;
}
.br .bbtn{
	display: inline-block;
	width: 120upx;
	height: 50upx;
	line-height: 50upx;
	box-sizing: border-box;
	text-align: center;
	border-radius: 25upx;	
	margin-top: 30upx;
	margin-left: 20upx;	
}
.br .delete {
    border:1upx solid #FF3333;  	
	color: #FF3333;	
}
.br .edit {
	 border:1upx solid #4E6DD2;
	 color: #4E6DD2;	
}
.renewal{
	border:1upx solid #FF9125;
	color: #FF9125;
}
.PA-list{
	/* position: relative; */
}
.PA-list .badd-box{
	height: 124upx;
	padding-top: 20upx;
	width: 100%;
	background: #fff;
	position: fixed !important;
	left:0%;
	bottom: 0upx;

}
.PA-list .badd {   
	height:64upx;
	width: 156upx;
	background:#6585F2;
	border-radius:32upx;	
	padding:0 24upx 0upx 80upx;
	line-height: 64upx;
	position: relative;
	margin-left: 297upx;
}
.badd .add {
	font-size: 24upx;
	color: #fff !important;
}
.badd image{
	height: 36upx;
	width: 36upx;
	position: absolute;
	left: 24upx;
	top: 15upx;
}
.rolename{
	font-size: 24upx;
	color: #FF9125;
	padding-left: 10upx;
	padding-right: 10upx;
}
.zwkf {
	width:380upx ;
    height: 380upx;
    margin-top:208upx;
}
.none {
    margin: auto;
    display: flex;
    justify-content: center
}
</style>
